<template>
  <!-- 有收货地址 且用户有默认地址 -->
  <van-contact-card
    type="edit"
    :name="`${address.name} ${address.region_text}`"
    :tel="address.tel"
    v-if="AddressCount > 0 && Object.getOwnPropertyNames(address).length > 0"
    @click="OnAddressSelect"
  />
  <!-- 有收货地址  但是用户没有选择默认地址-->
  <van-contact-card
    type="add"
    v-else-if="
      AddressCount > 0 && Object.getOwnPropertyNames(address).length === 0
    "
    @click="OnAddressSelect"
  />
  <!-- 没有任何收货地址 -->
  <van-contact-card type="add" v-else @click="AddressShow = true" />

  <!-- 商品卡片 -->
  <van-card
    v-for="(item, key) in CartList"
    :thumb="item.product.thumb_text"
    :num="item.nums"
    :key="key"
    @click-thumb="ToProductInfo(item.proid)"
  >
    <template #title>
      <div class="title" @click="ToProductInfo(item.proid)">
        {{ item.product.name }}
      </div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="item.attrs">
      <van-tag
        v-for="(attr, index) in item.attrs"
        :key="index"
        class="tag"
        type="primary"
        >{{ attr.value }}</van-tag
      >
      <van-tag class="tag" type="warning" v-if="item.type === 'live'"
        >直播商品</van-tag
      >
    </template>

    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
      <van-tag class="tag" type="warning" v-if="item.type === 'live'"
        >直播商品</van-tag
      >
    </template>

    <template #price>
      <div class="price">单价：￥{{ item.price }}</div>
      <div class="price">合计：￥{{ item.total }}</div>
    </template>
  </van-card>

  <van-cell
    title="支付方式"
    :value="PayActive.text"
    is-link
    @click="PayShow = true"
  />

  <!-- 支付方式的选择器 -->
  <van-popup v-model:show="PayShow" position="bottom" round>
    <van-picker
      title="选择支付方式"
      :columns="PayList"
      @cancel="PayShow = false"
      @confirm="OnPayConfirm"
    />
  </van-popup>

  <!-- 优惠券单元格 -->
  <van-coupon-cell
    :coupons="CouponList"
    :chosen-coupon="CouponActive"
    @click="CouponShow = true"
  />

  <!-- 优惠券列表 -->
  <van-popup
    v-model:show="CouponShow"
    round
    position="bottom"
    style="height: 90%; padding-top: 4px"
  >
    <van-coupon-list
      :coupons="CouponList"
      :disabled-coupons="NotCouponList"
      :chosen-coupon="CouponActive"
      :exchange-button-disabled="true"
      :show-exchange-bar="false"
      @change="OnCouponChange"
    />
  </van-popup>

  <!--订单备注 -->
  <van-field
    v-model="remark"
    rows="2"
    autosize
    label="订单备注"
    type="textarea"
    maxlength="120"
    placeholder="请输入订单备注"
    show-word-limit
  />

  <!-- 添加收货地址 -->
  <van-popup v-model:show="AddressShow" position="bottom" round>
    <van-address-edit
      show-set-default
      :area-list="areaList"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      :address-info="AddressInfo"
      @save="OnAddressAdd"
    />
  </van-popup>

  <!-- 提交动作栏 -->
  <van-submit-bar
    text-align="left"
    :price="total"
    button-text="确认支付"
    @submit="OnSubmit"
  />
</template>

<script setup>
// 引入地区数据
import { areaList } from "@vant/area-data";
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 收货地址
const address = ref({});
// 购物车数据
const CartList = ref([]);
// 收货地址列表显示与否
const AddressShow = ref(false);
// 收货地址详情数据
const AddressInfo = ref({});
// 收货地址总数
const AddressCount = ref(0);
// 购物车记录id
const cartids = ref(proxy.$route.query.cartids ?? 0);
// 支付方式列表显示与否
const PayShow = ref(false);
// 支付方式选择数据
const PayList = reactive([
  {
    text: "余额支付",
    value: "money",
  },
  {
    text: "支付宝支付",
    value: "zfb",
  },
  {
    text: "微信支付",
    value: "wx",
  },
]);
// 默认支付方式-余额支付
const PayActive = ref(PayList[0]);
// 可用优惠券
const CouponList = ref([]);
// 不可用优惠券
const NotCouponList = ref([]);
// 默认优惠券-不使用优惠券
const CouponActive = ref(-1);
// 优惠券列表显示与否
const CouponShow = ref(false);
// 订单备注
const remark = ref("");

// 挂载前钩子
onBeforeMount(() => {
  // 获取收货地址初始数据
  GetAddressData();
  // 获取购物车初始数据
  GetCartData();
  // 获取我的优惠券初始数据
  GetCouponData();
  // 处理收货地址
  AddressInfo.value = {
    name: business.value.nickname,
    tel: business.value.mobile,
    areaCode:
      business.value.district || business.value.city || business.value.province,
  };
});

// 提交表单--确认购买
const OnSubmit = async () => {
  // 判断是否发起哪个请求
  if (cartids.value) {
    // 发起购物车购买的请求
    // 组装数据
    const params = {
      cartids: cartids.value,
      busid: business.value.id,
      addrid: address.value.id,
      pay: PayActive.value.value,
      remark: remark.value,
    };
    // 使用了优惠券
    if (CouponActive.value !== -1) {
      params.couponid = CouponList.value[CouponActive.value].id;
    }
    // 发起请求
    const result = await proxy.$http.post({
      url: "/order/add",
      params,
    });
    if (result.code === 1) {
      // 如果url存在，直接跳转订单详情
      if (result.url) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            proxy.$router.push({
              path: result.url,
              query: result.data,
              replace: true,
            });
          },
        });
      } else {
        // 跳转收银台
        proxy.$router.push({
          path: "/business/cashier",
          query: { payid: result.data.id },
        });
      }
    } else {
      proxy.$fail(result.msg);
    }
  } else {
    // 发起立即购买的请求
    // 从CartList提取需要的数据
    let info = CartList.value[0];
    // 组装数据
    let params = {
      busid: business.value.id,
      addrid: address.value.id,
      pay: PayActive.value.value,
      remark: remark.value,
      proid: info.proid, // 商品主键
      price: info.price, // 商品价格
      nums: info.nums, // 商品数量
      attrs: info.attrs.length > 0 ? JSON.stringify(info.attrs) : "", // 已选择商品属性
    };
    // 是否使用优惠券
    if (CouponActive.value !== -1) {
      params.couponid = CouponList.value[CouponActive.value].id;
    }
    // 发起请求
    let result = await proxy.$http.post({
      url: "/order/buy",
      params,
    });
    // 处理请求结果
    if (result.code === 1) {
      // 如果url存在，直接跳转订单详情
      if (result.url) {
        proxy.$success({
          message: result.msg,
          onClose: () => {
            proxy.$router.push({
              path: result.url,
              query: result.data,
              replace: true,
            });
          },
        });
      } else {
        // 跳转收银台---微信或支付宝支付方式
        proxy.$router.push({
          path: "/business/cashier",
          query: { payid: result.data.id },
        });
      }
    } else {
      proxy.$fail(result.msg);
    }
  }
};

// 确认支付方式
const OnPayConfirm = ({ selectedOptions }) => {
  PayActive.value = selectedOptions[0];
  PayShow.value = false;
};

// 更换优惠券
const OnCouponChange = (index) => {
  CouponActive.value = index;
  CouponShow.value = false;
  if (CouponActive.value !== -1) {
    // 选中的优惠券
    const coupon = CouponList.value[index];
    // 优惠后总价
    let total = 0;
    // 计算商品的总价
    CartList.value.map((item) => (total += parseFloat(item.total)));
    // 保留两位小数点
    total = total.toFixed(2);
    // 折扣率
    let rate = coupon.rate ? coupon.rate : 1;
    // 优惠后的总价
    let RatePrice = (parseFloat(total) * parseFloat(rate)).toFixed(2);
    // 优惠券优惠金额
    let CouponPrice = (parseFloat(total) - parseFloat(RatePrice)).toFixed(2);
    CouponList.value[index].value = parseFloat(CouponPrice) * 100;
  }
};

// 获取默认收货地址
const GetAddressData = async () => {
  // 先检查状态管理器（会话存储）里有没有地址
  const cached =
    Object.getOwnPropertyNames(proxy.$address.value).length > 0
      ? proxy.$address
      : null;
  // 如果有直接赋值，如果没有则需要发起请求去查询
  if (cached) {
    address.value = cached.value;
    return;
  }
  // 组装参数
  const params = {
    busid: business.value.id,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/cart/address",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 收货地址的数据结构
    address.value = {
      id: result.data.id,
      name: result.data.consignee,
      tel: result.data.mobile,
      region_text: result.data.region_text + result.data.address,
    };
  }
};

// 添加收货地址
const OnAddressAdd = async (values) => {
  // 组装参数
  let params = {
    busid: business.value.id,
    consignee: values.name,
    mobile: values.tel,
    code: values.areaCode,
    address: values.addressDetail,
    status: values.isDefault === true ? 1 : 0,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/address/add",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    proxy.$success({
      message: result.msg,
    });
  } else {
    proxy.$fail(result.msg);
  }
};

// 获取购物车记录
const GetCartData = async () => {
  // 先判断会话存储当中是否存在缓存,如果有缓存就拿缓存的数据，没有缓存就接口请求
  let cart =
    Object.getOwnPropertyNames(proxy.$cart.value).length > 0
      ? proxy.$cart.value
      : [];
  // 如果会话存储有数据（说明从立即购买过来）
  if (cart.length > 0 && !cartids.value) {
    CartList.value = cart;
    return;
  }
  // 组装参数
  let params = {
    cartids: cartids.value,
    busid: business.value.id,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/cart/confirm",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    CartList.value = result.data;
    // 把商品规格转换对象
    CartList.value.map((item) => (item.attrs = JSON.parse(item.attrs)));
  } else {
    proxy.$fail({
      message: result.msg,
      onClose: () => proxy.$router.back(),
    });
  }
};

// 获取优惠券数据
const GetCouponData = async () => {
  // 组装参数
  let params = {
    busid: business.value.id,
  };
  // 发起请求
  let result = await proxy.$http.post({
    url: "/cart/coupon",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 将地址信息也放在这里请求了
    AddressCount.value = result.data.AddressCount;
    // 循环可用优惠券,组装优惠券的数据结构
    result.data.CouponList.forEach((item) => {
      CouponList.value.push({
        id: item.id, // 领取优惠券记录id
        name: item.coupon.title, // 优惠券名称
        startAt: item.coupon.createtime, // 优惠券开始时间
        endAt: item.coupon.endtime, // 优惠券结束时间
        rate: item.coupon.rate, // 折扣率
        valueDesc: `${item.coupon.rate * 100}`, // 折扣券优惠金额文案
        unitDesc: "折", // 单位文案
        condition: item.coupon.status_text, // 满减条件
      });
    });
    // 循环不可用优惠券,组装优惠券的数据结构
    result.data.NotCouponList.forEach((item) => {
      NotCouponList.value.push({
        id: item.id, // 领取优惠券记录id
        name: item.coupon.title, // 优惠券名称
        startAt: item.coupon.createtime, // 优惠券开始时间
        endAt: item.coupon.endtime, // 优惠券结束时间
        rate: item.coupon.rate, // 折扣率
        valueDesc: `${item.coupon.rate * 100}`, // 折扣券优惠金额文案
        unitDesc: "折", // 单位文案
        condition: item.coupon.status_text, // 满减条件
      });
    });
  }
};

// 订单总金额计算属性
const total = computed(() => {
  let total = 0;
  // 购物车的所有订单金额加起来
  CartList.value.map((item) => (total += parseFloat(item.total)));
  // 有没有使用优惠券
  if (CouponActive.value !== -1) {
    let rate = CouponList.value[CouponActive.value].rate ?? 1;
    total = (total * rate).toFixed(2);
  }
  // 单位：分，乘*100=>单位：元
  return total * 100;
});

// 跳转到商品详情页
const ToProductInfo = (proid) =>
  proxy.$router.push({ path: "/product/info", query: { proid } });
const OnAddressSelect = () =>
  proxy.$router.push({ path: "/address", query: { action: "confirm" } });
</script>

<style scoped>
.van-card {
  background-color: #fff;
}

:deep(.van-card__bottom) {
  position: relative;
}

:deep(.van-card__num) {
  position: absolute;
  bottom: 0px;
  right: 5px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 12px;
  font-weight: bold;
}

/* 姓名只一行显示，超出隐藏 */
:deep(.van-contact-card__title) div:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>